<template>
	<view class="feedback-container">
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 意见输入框 -->
			<view class="input-item">
				<textarea class="feedback-input" placeholder="请输入您的宝贵意见" v-model="feedbackContent" maxlength="500"
					@input="handleInput"></textarea>
				<view class="word-count">{{ currentLength }}/500</view>
			</view>

			<!-- 联系方式 (可选) -->
			<!-- <view class="input-item">
				<input class="contact-input" placeholder="请输入您的联系方式（选填）" v-model="contactInfo" maxlength="50"
					type="text" />
			</view> -->

			<!-- 提交按钮 -->
			<button class="submit-btn" :disabled="!canSubmit" @tap="submitFeedback">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import api from '../../api/request.js';

	export default {
		data() {
			return {
				feedbackContent: '', // 反馈内容
				contactInfo: '', // 联系方式
				currentLength: 0, // 当前输入长度
				canSubmit: false, // 是否可以提交
			};
		},
		methods: {
			// 处理输入事件
			handleInput(e) {
				this.currentLength = e.detail.value.length;
				this.canSubmit = this.currentLength > 0;
			},

			// 提交反馈
			submitFeedback() {
				if (!this.canSubmit) return;

				// 显示加载提示
				uni.showLoading({
					title: '提交中...',
				});

				// 调用接口提交反馈
				api.submitFeedback({
						content: this.feedbackContent,
						// contact: this.contactInfo,
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == 1) {
							// 提交成功
							uni.showToast({
								title: '感谢您的反馈！',
								icon: 'success',
								duration: 2000,
							});

							// 重置表单
							this.feedbackContent = '';
							this.contactInfo = '';
							this.currentLength = 0;
							this.canSubmit = false;

							// 2秒后返回上一页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/user'
								})
							}, 2000);
						} else {
							// 提交失败
							uni.showToast({
								title: res.msg || '提交失败，请稍后重试',
								icon: 'none',
							});
						}
					})
					.catch((err) => {
						uni.hideLoading();
						console.error('提交反馈失败', err);
						uni.showToast({
							title: '提交失败，请稍后重试',
							icon: 'none',
						});
					});
			},
		},
	};
</script>

<style lang="scss">
	.feedback-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.form-container {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.input-item {
		margin-bottom: 30rpx;
	}

	.feedback-input {
		width: 100%;
		height: 300rpx;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		background-color: #fafafa;
		resize: none;
	}

	.contact-input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		background-color: #fafafa;
	}

	.word-count {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #ff6b00;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-top: 20rpx;
		border: none;
	}

	.submit-btn[disabled] {
		background-color: #ffb780;
		color: #fff;
	}
</style>